<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="content">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input v-model="seach" placeholder="请输入内容"/>
            </el-col>
            <el-col :span="16">
              <el-button plain @click="getUser">清空</el-button>
              <el-button type="primary" @click="onseach">搜索</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="success" icon="el-icon-edit" @click="adduserBtn">添加用户</el-button>
            </el-col>
          </el-row>
          <el-row class="massage">
            <el-alert type="info" style="line-height:10px" :closable="false">
              <template>
                <i class="el-icon-info">共 {{ total }} 条记录</i>
              </template>
            </el-alert>
          </el-row>
          <el-row>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="#" width="80"></el-table-column>
              <!-- <el-table-column type="index" label="#" width="180"> </el-table-column> -->
              <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
              <el-table-column prop="phone" label="联系电话"></el-table-column>
              <el-table-column prop="username" label="用户名" width="180"></el-table-column>
              <el-table-column prop="permission_group_title" label="权限组名称" width="180"></el-table-column>
              <el-table-column prop="role" label="角色" width="180"></el-table-column>
              <el-table-column label="操作">
                <template v-slot="{ row }">
                  <!-- <template> -->
                  <el-button
                    plain
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="editUser(row)"
                  />
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    class="is-plain"
                    circle
                    @click="delUser(row.id)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row class="massage">
            <el-col :span="15">&nbsp;</el-col>
            <el-col :span="8">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-sizes="[5, 10, 15]"
                :page-size="page.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
          <!-- 添加弹出层 -->
          <el-dialog
            :title="text"
            :visible.sync="dialogVisible"
            width="70%"
            round
            @close="handleClose"
          >
            <el-form ref="forms" label-width="120px">
              <el-form-item label="用户名">
                <el-input v-model="formData.username"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="formData.password"></el-input>
              </el-form-item>
              <el-form-item label="邮件">
                <el-input v-model="formData.email"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="formData.phone"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="formData.sex" style="width: 100%" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="角色">
                <el-input v-model="formData.role"></el-input>
              </el-form-item>
              <el-form-item label="权限组名称">
                <el-select
                  v-model="formData.permission_group_id"
                  style="width: 100%"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="item in rootlist"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="介绍">
                <el-input type="textarea" v-model="formData.introduction"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onclick">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser, delUser, addUser, editUser, getpermissions } from '@/api/users/userinfo.js'
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          value: '男',
          label: '男'
        },
        {
          id: 1,
          value: '女',
          label: '女'
        }
      ],
      rootlist: [],
      text: '创建用户',
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      seach: '',
      currentPage4: '3',
      dialogVisible: false,
      formData: {
        username: '',
        password: '',
        email: '',
        phone: '',
        sex: '',
        permission_group_id: '',
        role: '',
        introduction: '',
        avatar: ''
      },
      total: 0
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      this.seach = ''
      try {
        const res = await getpermissions()
        this.rootlist = res.data
        console.log(this.rootlist)
        const { data } = await getUser(this.page)
        this.tableData = data.list
        this.total = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.getUser()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.page = val
      this.getUser()
    },
    async delUser(id) {
      try {
        console.log(id)
        const res = await delUser(id)
        console.log(res)
        this.getUser()
      } catch (err) {
        console.log(err)
      }
    },
    async editUser(row) {
      this.text = '修改用户'
      console.log(row)
      this.dialogVisible = true
      this.formData = row
    },
    adduserBtn() {
      this.text = '添加用户'
      this.dialogVisible = true
    },
    async onseach() {
      try {
        const res = { ...this.page, username: this.seach }
        const { data } = await getUser(res)
        this.tableData = data.list
      } catch (err) {
        console.log(err)
      }
    },
    // 弹出层方法
    handleClose() {
      this.formData.username = ''
      this.formData.password = ''
      this.formData.email = ''
      this.formData.phone = ''
      this.formData.sex = ''
      this.formData.permission_group_id = this.formData.role = ''
      this.formData.introduction = ''
      this.formData.avatar = ''
      this.dialogVisible = false
    },
    async onclick() {
      if (this.text === '添加用户') {
        try {
          const res = await addUser(this.formData)
          console.log(res)
          this.$message.success('添加成功')
          this.dialogVisible = false
          this.getUser()
        } catch (err) {
          console.log(err)
        }
      } else {
        try {
          delete this.formData.permission_group_title
          delete this.formData.is_deleted
          delete this.formData.last_update_time
          delete this.formData.create_time
          const res = await editUser(this.formData)
          console.log(res)
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.getUser()
        } catch (err) {
          console.log(err)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.content {
  width: 100%;
  height: 100%;
}
.massage {
  margin: 15px;
}
</style>
